@page "/maps/highlighted-region"

@using Syncfusion.Blazor.Maps

@inherits SampleBaseComponent;

<SampleDescription>
    <p>  This sample depicts the ATM populated areas in Oklahoma by highlighting the regions.</p>
</SampleDescription>
<ActionDescription>
   <p>In this example, you can see how to highlight some specific region by rendering circles. Any custom HTML element can be used as a marker.</p>
   <p>More information about marker can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/maps/markers/#marker-shapes'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <div style="width:300px;margin:0 auto;padding-bottom:10px">
        <img src="images/maps/atm.png" style="width:25px;height:25px;float:left">
        <div style="padding-left:30px;font-size:18px;font-weight:400;">ATM locations in Oklahoma, USA</div>
    </div>
    <SfMaps>
        <MapsCenterPosition Latitude="35.65" Longitude="-97.3"/>
        <MapsZoomSettings Enable="false" ZoomFactor="1.75"/>
        <MapsLayers>
            <MapsLayer ShapeData='new {dataOptions ="data/maps/oklahoma.json"}' TValue="string">
                <MapsShapeSettings Fill="#F5F5F5">
                    <MapsShapeBorder Color="#EEDA97" Width="1"/>
                </MapsShapeSettings>
                <MapsMarkerSettings>
                    <MapsMarker Width="20" Height="20" Visible="true" Shape="MarkerType.Image" ImageUrl="images/maps/ballon.png" Fill="#000080" DataSource="@AtmMarkerData" TValue="MarkerData" AnimationDuration="0">
                        <MapsMarkerBorder Color="transparent"/>
                    </MapsMarker>
                    <MapsMarker Width="130" Height="130" Visible="true" Shape="MarkerType.Circle" Fill="#4682b4" DataSource="@MarkerAtmGroup" Opacity="0.4" TValue="MarkerGroup" AnimationDuration="0">
                        <MapsMarkerBorder Color="transparent"/>
                        <MapsMarkerTooltipSettings Visible="true" ValuePath="Text"/>
                    </MapsMarker>
                    <MapsMarker Width="100" Height="100" Visible="true" Shape="MarkerType.Circle" Fill="#4682b4" DataSource="@AtmMarkerGroup" Opacity="0.4" TValue="MarkerGroup" AnimationDuration="0">
                        <MapsMarkerBorder Color="transparent"/>
                        <MapsMarkerTooltipSettings Visible="true" ValuePath="Text"/>
                    </MapsMarker>
                    <MapsMarker Visible="true" DataSource="MarkerAtmData" TValue="Marker">
                        <MarkerTemplate>
                            @{
                                var Data = context as Marker;
                                <div style="margin-left:0px;margin-top:0px">@Data.Name</div>
                            }
                        </MarkerTemplate>
                    </MapsMarker>
                </MapsMarkerSettings>
            </MapsLayer>
        </MapsLayers>
    </SfMaps>    
    <div class="urllink">
        Source:
        <a href="https://www.google.co.in/maps/search/atm+in+oklahoma/35.3864432,-98.2888719,8z/data=!3m1!4b1" target="_blank">www.google.co.in/maps</a>
    </div>
</div>
@code {
    public class Marker {
        public double Latitude { get; set; }
        public double Longitude { get; set; }
        public string Name { get; set; }
    }
    public class MarkerData {
        public double Latitude { get; set; }
        public double Longitude { get; set; }
    };
    public class MarkerGroup {
        public double Latitude { get; set; }
        public double Longitude { get; set; }
        public string Text { get; set; }
    };
    public List<MarkerGroup> AtmMarkerGroup = new List<MarkerGroup> {
        new MarkerGroup { Latitude=35.5112516, Longitude=-97.5843, Text="10/18 ATMs" }
    };
    public List<MarkerGroup> MarkerAtmGroup = new List<MarkerGroup> {
        new MarkerGroup { Latitude=36.0808845, Longitude=-96.0205078, Text="5/18 ATMs" }
    };
    public List<MarkerData> AtmMarkerData = new List<MarkerData> {
        new MarkerData { Latitude=35.6379762, Longitude=-97.4823761 },
        new MarkerData { Latitude=35.5676663, Longitude=-97.5128031 },
        new MarkerData { Latitude=35.5412361, Longitude=-97.601552 },
        new MarkerData { Latitude=35.5451471, Longitude=-97.5661039 },
        new MarkerData { Latitude=35.5120376, Longitude=-97.5918531 },
        new MarkerData { Latitude=35.5112516, Longitude=-97.5843 },
        new MarkerData { Latitude=35.4737072, Longitude=-97.5158072 },
        new MarkerData { Latitude=35.4575239, Longitude=-97.6179457 },
        new MarkerData { Latitude=35.4362676, Longitude=-97.5998354 },
        new MarkerData { Latitude=35.3954872, Longitude=-97.5962305 },
        new MarkerData { Latitude=35.3492258, Longitude=-97.5294113 },
        new MarkerData { Latitude=35.5260794, Longitude=-98.7032318 },
        new MarkerData { Latitude=34.7827916, Longitude=-98.3001709 },
        new MarkerData { Latitude=34.0793936, Longitude=-98.5583496 },
        new MarkerData { Latitude=36.1434199, Longitude=-97.0690155 },
        new MarkerData { Latitude=36.0170318, Longitude=-96.11063 },
        new MarkerData { Latitude=36.1608845, Longitude=-96.0205078 },
        new MarkerData { Latitude=36.1323292, Longitude=-95.9624863 },
        new MarkerData { Latitude=36.1317746, Longitude=-95.9046364 },
        new MarkerData { Latitude=36.1604341, Longitude=-95.8885002 },
    };
    public List<Marker> MarkerAtmData = new List<Marker> {
        new Marker { Longitude=-101.9450281, Latitude=35.2018863, Name="Amarillo" },
        new Marker { Longitude=-98.0971969, Latitude=35.5514624, Name="El Reno" },
        new Marker { Longitude=-97.8432238, Latitude=35.5150073, Name="Yukon" },
        new Marker { Longitude=-97.2557752, Latitude=35.4933852, Name="Harrah" },
        new Marker { Longitude=-97.1019391, Latitude=35.3620257, Name="Shawnee" },
        new Marker { Longitude=-97.072877, Latitude=35.6853011, Name="Wellston" },
        new Marker { Longitude=-96.2093353, Latitude=36.133417, Name="Lotsee" },
        new Marker { Longitude=-96.3077788, Latitude=36.1879088, Name="Sand Springs" },
        new Marker { Longitude=-98.7075369, Latitude=35.931371, Name="Oakwood" },
        new Marker { Longitude=-98.0003367, Latitude=35.0403272, Name="Chickasha" },
        new Marker { Longitude=-97.1836494, Latitude=36.4595554, Name="Red Rock" },
        new Marker { Longitude=-96.7148021, Latitude=35.4859752, Name="Prague'l" },
        new Marker { Longitude=-97.9339651, Latitude=36.1022835, Name="Hennessey" },
        new Marker { Longitude=-96.2595621, Latitude=35.2453183, Name="Wetumka" },
        new Marker { Longitude=-97.4499583, Latitude=35.0304344, Name="Purcell" },
        new Marker { Longitude=-96.1059044, Latitude=35.605942, Name="Okmulgee" },
        new Marker { Longitude=-97.9684792, Latitude=35.8439429, Name="Kingfisher" },
        new Marker { Longitude=-95.7691956, Latitude=34.9332303, Name="McAlester" },
        new Marker { Longitude=-96.1289978, Latitude=34.3853794, Name="Atoka" },
        new Marker { Longitude=-97.1191406, Latitude=34.5042932, Name="Davis" },
        new Marker { Longitude=-98.0310059, Latitude=37.1537496, Name="Anthony" },
        new Marker { Longitude=-98.3564758, Latitude=36.7542898, Name="Cherokee" },
        new Marker { Longitude=-95.3695679, Latitude=35.7476268, Name="Muskogee" },
        new Marker { Longitude=-95.582428, Latitude=35.2871057, Name="Eufaula" },
        new Marker { Longitude=-96.9412994, Latitude=36.0446575, Name="Mehan" },
        new Marker { Longitude=-99.0925598, Latitude=35.0299964, Name="Hobart" },
        new Marker { Longitude=-98.4924316, Latitude=33.9137338, Name="Wichita Falls" },
        new Marker { Longitude=-98.9675903, Latitude=35.5154609, Name="Clinton" },
        new Marker { Longitude=-98.923645, Latitude=36.1478557, Name="Seiling" },
        new Marker { Longitude=-99.2985535, Latitude=36.1500735, Name="Vici" },
        new Marker { Longitude=-95.3173828, Latitude=36.3084855, Name="Pryor" },
        new Marker { Longitude=-96.7524719, Latitude=34.9596836, Name="Konawa" }
    };
}